<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>手工编排</title>

    <script src="{{ url_for('static', filename='jquery.js') }}"></script>
    <link href="{{ url_for('static', filename='bootstrap.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='bootstrap.js') }}"></script>

        

        <style>
            .draggable { border: 1px solid #e6e6e6;z-index: 9;}
            .droppable { border: 1px solid #e6e6e6;z-index: 8;}
            #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
            .show {height: auto;line-height: normal;max-height: none;min-height: 0px;margin: 0px;}
            li{padding: 1px;}
            .btn-sm {padding: 1px;margin: 0px;}
            .list-group-item {padding: 1px;margin: 0px;}
            .row{margin: 0px;}
            .col-sm { padding: 3px;}
            .c1{text-align: center;}
            .padding0{padding: 1px;}
            .cardname{width: 120px;text-align: center;}
            
            </style>
        <script type="text/javascript">
  var kch
  var room
  var studentinfo_kc
  var emptystudent
  var errorstudent
  $( document ).ready(function() {
    console.log( "ready!" );
    $.getJSON("/getkch",function(r){
      room = r;
      $.each(r,function(i){
        addkc(i,r[i][0]+"考场")
      })
      roomid=Object.keys(room);
      $("#groups").html("");
      $.each(room[roomid[0]][2],function(i,value){
        addguoup(i+1,value);
      });
      getStudentInfo(roomid[0]);
      $(".draggable").each(function(i,e){
      //alert(e.id)
    });;
    getEmptyStudent();
    });
    $("#KcSelect1").change(function(){
      getStudentInfo($(this).val());
    });

  });
  function abnormalstudent(){
    $("#studentshow").html("");
    $.each(errorstudent,function(i,v){
      console.log(v);
      $("#studentshow").append("<div id=\""+v[0]+"\" data-id=\""+v[0]+"\" class=\"card cardname\" draggable=\"true\" ondragstart=\"drag(event)\">"+v[3]+v[2]+"</div>")
    })

  }
  function getEmptyStudent(){
    $.getJSON(
      "/getEmptyStudent",
      function(data){
        emptystudent=data;
        $.each(data,function(i,v){
          console.log(v[2]);
        })
        $("#emptyall").html("全部("+Object.keys(emptystudent).length+")");
        showempty("all");
        if(Object.keys(errorstudent).length>0){
          abnormalstudent();
        }
      }
    );
  }
  function showempty(d){
    $("#studentshow").html("");
    $.each(emptystudent,function(i,v){
      if(d=="all"){
        $("#studentshow").append("<div id=\"s"+v[0]+"\" data-id=\""+v[0]+"\" class=\"card cardname\" draggable=\"true\" ondragstart=\"drag(event)\">"+v[3]+v[2]+"</div>")
      }else{
        if(v[4]==d){
          $("#studentshow").append("<div id=\"s"+v[0]+"\" data-id=\""+v[0]+"\" class=\"card cardname\" draggable=\"true\" ondragstart=\"drag(event)\">"+v[3]+v[2]+"</div>")
        }
      }
    })

  }
  function showStudent(){
    errorstudent={};
    $.each(studentinfo_kc,function(i,v){
      
      var obj=$("#id"+format00(v[6])+format00(v[7]));
      
      if(obj.html()=="空"){
        obj.html(v[3]+" "+v[2]);
        console.log(obj.html());

      }else{
        errorstudent[v[0]]=v;
        console.log(v);
      }
      
    
      
    });
    $("#abnormal").html("异常("+Object.keys(errorstudent).length+")");

    
  }
  function addkc(id,name){
    $("#KcSelect1").append("<option value= \""+id+"\">"+name+"</option>")
  }
        
  $( function() {
    $( ".draggable" ).draggable();
    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        $(this).removeClass('btn-light')
        $( this ).addClass( "btn-primary" )  //.find( "p" ).html( "Dropped!" );
        alert($( this ).data("id"));
        alert(ui.draggable.data('id'))
      }
    });
    $("button").click(function(){alert("id")});
  });
  function addguoup(z,p){
    var zn = new Array();
    zn[0]="";
    zn[1]="第一组";zn[2]="第二组";zn[3]="第三组";zn[4]="第四组";zn[5]="第五组";zn[6]="第六组";zn[7]="第七组";zn[8]="第八组";zn[9]="第九组";
    html="<div class=\"col-sm \"><ul id=z"+z+" class=\"list-group\"><li style=\"text-align: center;\" class=\"list-group-item active\">"+zn[z]+"</li></ul></div>"
    $("#groups").prepend(html);
    for (var i=0 ; i<p ; i++){
      $("#z"+z).append("<li class=\"list-group-item\"><div class=\"row\"><button id=\"id"+format00(z*2)+format00(i+1)+"\" data-z=\""+String(z*2)+"\" data-p=\""+String(i+1)+"\" class=\"btn btn-sm btn-outline-primary col-sm show\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\">空</button><button id=\"id"+format00(z*2-1)+format00(i+1)+"\" data-z=\""+String(z*2-1)+"\" data-p=\""+String(i+1)+"\" class=\"btn btn-sm btn-outline-primary col-sm show\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\">空</button></div></li>");
    }
  }
  function format00(num){
    if(num<10){
      return "0"+String(num);
    }else{
      return String(num);
    }
  }

  function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("dragid",ev.target.dataset.id);
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("dragid");
	//ev.target.appendChild(document.getElementById(data));
  //alert($("#KcSelect1").val()+" "+ev.currentTarget.dataset.z+" "+ev.currentTarget.dataset.p+" "+data);
  $.post(
    "setsutdent",
    {
      kc:$("#KcSelect1").val(),
      z:ev.currentTarget.dataset.z,
      p:ev.currentTarget.dataset.p,
      id:data
    },
    function(data){

      getStudentInfo($("#KcSelect1").val());
      

    }
  
  );
}
function getStudentInfo(kc){
  $("#groups").html("");
      $.each(room[$("#KcSelect1").val()][2],function(i,value){
        addguoup(i+1,value);
      });
  $.getJSON("/getStudentInfo",
    {kc:kc},
    function(data){
      studentinfo_kc=data;
      showStudent();
      getEmptyStudent();

    }
  )
}
  </script>
    </head>
    
    <body>
        

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-2 "> <label for="exampleFormControlSelect1">考场选择</label></div>
        <div class="col-sm-2 ">

            
            <select class="form-control" id="KcSelect1">

            </select>
            
        </div>
        <div class="col-sm-2 ">
          <div id="delete" data-id="delete" type="button" class="btn btn-sm btn-primary" draggable="true" ondragstart="drag(event)">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"></path>
            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"></path>
            </svg>
            清除
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-9 padding0">
          <div class="row" id="groups">
            <div class="col-sm ">
              <ul class="list-group">
                <li class="list-group-item active">第三组</li>
                <li class="list-group-item">
                  <div class="row">

                  
                  <div class="btn btn-sm btn-light draggable col-sm">67班<br/>和在要</div>
                  <button type="button" class="btn btn-sm btn-light droppable col-sm">63班<br/>枯地要工</button>
                  
                  </div>
                </li>
                <li class="list-group-item">A third item</li>
                <li class="list-group-item">A fourth item</li>
                <li class="list-group-item">And a fifth one</li>
              </ul>
            </div>

            <div class="col-sm ">
              <ul class="list-group">
                <li class="list-group-item active" aria-current="true">第一组</li>
                <li class="list-group-item">
                  <div class="row">
                    <div class="card col-sm droppable">67班  和在要</div>
                    <div class="card col-sm droppable">63班  枯地要工</div>
                  </div>
                </li>
                <li class="list-group-item">A third item</li>
                <li class="list-group-item">A fourth item</li>
                <li class="list-group-item">And a fifth one</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-3 padding0">
          <div class="card">
            <div class="card-header">
              <div class="btn-group c1" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-secondary" onclick="showempty('7');">七年级</button>
                <button type="button" class="btn btn-secondary" onclick="showempty('8');">八年级</button>
                <button type="button" class="btn btn-secondary" onclick="showempty('9');">九年级</button>
                <button type="button" class="btn btn-secondary" id="emptyall" onclick="showempty('all');">全部(0)</button>
                <button type="button" class="btn btn-secondary" id="abnormal" onclick="abnormalstudent();">异常</button>
              </div>
            </div>
            <div class="card-body row" id="studentshow" style="padding: 2px;">
                <div id="s1122132145" data-id="1122132145" class="card cardname" draggable="true" ondragstart="drag(event)">7-960 阿斯蒂芬</div>
                <div id="s1122132146" data-id="1122132146" class="card cardname" draggable="true" ondragstart="drag(event)">asdf</div>
                <div id="s1122132147" data-id="1122132147" class="card cardname" draggable="true" ondragstart="drag(event)">asdf</div>
                


                <div id="s1122132148" data-id="1122132148" class="card cardname" draggable="true" ondragstart="drag(event)">asdf</div>
                <div id="s1122132149" data-id="1122132149" class="card cardname" draggable="true" ondragstart="drag(event)">asdf</div>
    
              
            </div>
          </div>
        </div>
      </div>
    </div>     
    </body>
</html>